<template>
    <el-dialog width="58%" :title="title" :visible.sync="visible">
        <el-form ref="form" :rules="rules" :model="model"  label-width="160px" size="small" v-loading="loading">
          <el-row>
              <el-col :span="12">
                  <el-form-item prop="name" label="资产名称">
                      <el-input readonly placeholder="请输入资产名称" v-model="model.name"></el-input>
                  </el-form-item>
              </el-col>
              <el-col :span="12">
                  <el-form-item prop="number" label="资产ID">
                      <el-input readonly placeholder="请输入资产ID" v-model="model.number"></el-input>
                  </el-form-item>
              </el-col>
          </el-row>
          <el-row>
              <el-col :span="12">
                  <el-form-item prop="contractNamber" label="合同编号">
                      <el-input readonly placeholder="请输入合同编号" v-model="model.contractNamber"></el-input>
                  </el-form-item>
              </el-col>
              <el-col :span="12">
                  <el-form-item prop="batch" label="批次">
                      <el-input readonly placeholder="请输入批次" v-model="model.batch"></el-input>
                  </el-form-item>
              </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item prop="price" label="价格（元）">
                <el-input-number disabled controls-position="right" :precision="2" :step="0.1" placeholder="请输入价格" v-model="model.price"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="unit" label="计量单位">
                <el-input readonly placeholder="请输计量单位" v-model="model.unit"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item prop="isFixed" label="是否属于固定资产">
                <el-switch disabled v-model="model.isFixed"></el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="isFax" label="是否含税">
                  <el-switch disabled v-model="model.isFax"></el-switch>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item prop="model" label="规格型号">
                <el-input readonly placeholder="请输入规格型号" v-model="model.model"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="buyer" label="购买单位">
                <el-input readonly placeholder="请输入购买单位" v-model="model.buyer"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item prop="manufacturer" label="供应商">
                <el-input readonly placeholder="请输入购买单位" v-model="model.manufacturer"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="入库日期" prop="inDate ">
                <el-date-picker
                  v-model="model.usefulLife" style="width: 100%;" readonly type="date" placeholder="选择入库日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item prop="photo" label="资产照片">
                <image-upload  readonly v-model="model.photo" ></image-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item prop="startDate" label="送修时间">
                <el-date-picker
                  v-model="model.startDate" style="width: 100%;" readonly value-format="yyyy-MM-dd" type="date" placeholder="选择送修时间">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="完成时间" prop="finishDate">
                <el-date-picker
                  v-model="model.finishDate" style="width: 100%;" readonly value-format="yyyy-MM-dd" type="date" placeholder="选择完成时间">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item prop="accepPhoto" label="维修完成验收照片">
                <image-upload v-model="model.accepPhoto" ></image-upload>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="维修状态" prop="state">
                <el-select  v-model="model.repairState"  >
                  <el-option :key="1" label="待维修" :value="1"></el-option>
                  <el-option :key="2" label="已维修" :value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
    </el-dialog>
</template>

<script>

  import Vue from 'vue'
  import { MessageBox, Message,Notification } from 'element-ui'
  import pick from 'lodash.pick'
  import { ACCESS_TOKEN } from "@/store/mutation-types"
  import ImageUpload from "@/components/ImageUpload"
  import { getAction,deleteAction,putAction,postAction } from '@/api/manage'

  export default {
    name: "detailModal",
    components: {
      ImageUpload
    },
    data () {
      return {
        title:"详情",
        visible: false,
        loading:false,
        disableSubmit:true,
        model: {},
        url: {

        },  // 新增资产表单验证
        rules: {
          name: [{ required: true, message: '请输入资产名称', trigger: 'blur' }],
          quantity: [{ required: true, message: '请输入资产数量', trigger: 'blur' }],
          unit: [{ required: true, message: '请输入资产计量单位', trigger: 'blur' }],
          buyer: [{ required: true, message: '请输入资产购买单位', trigger: 'blur' }],
          price: [{ required: true, message: '请输入资产价格', trigger: 'blur' }],
          model: [{ required: true, message: '请输入规格型号', trigger: 'blur' }],
        },
      }
    },
    created () {
      const token = Vue.ls.get(ACCESS_TOKEN);
      this.headers = {"X-Access-Token":token}

    },
    methods: {
      refresh () {
      },
      add () {
        this.refresh();
        this.edit({});
      },
      edit (record) {
        let that = this;
        this.visible = true;
        this.disableSubmit = false;
        if(that.$refs.form){
          that.$refs.form.resetFields();
          that.model = Object.assign({}, record);
        }else{
          this.$nextTick(() => {
            that.$refs.form.resetFields();
            that.model = Object.assign({}, record);
          })
        }
      },
      handleSubmit () {
        const that = this;
        this.$refs.form.validate(valid => {
          if (valid) {
            this.loading = true
            let promise;
            promise = postAction("/repair/edit",Object.assign({}, this.model))

            promise.then(res =>{
              if(res.success){
                this.$message.success(res.message)
                that.close();
                that.$emit('ok');
              }else{
                this.$message.warning( res.message)
              }
            }).finally(() => {
              this.loading = false
            });
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      handleCancel () {
        this.close()
      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
      handleRemove(file) {
        console.log(file);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
    },

    }
  }
</script>

<style scoped>

</style>
